// 配置通用的接口调用方法
import axios from 'axios'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()

// 配置基准路径
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'

// 此时instance实例和axios类似
const instance = axios.create({
  // 设置超时时间
  timeout: 3000,
  // 设置基准的接口请求路径
  baseURL: baseURL
})

// 请求拦截器：统一添加请求头Token
instance.interceptors.request.use((config) => {
  // 如果已经登录，发送请求时携带token信息
  const token = store.state.user.profile.token
  if (token) {
    // 已经登录，添加请求头
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, (err) => {
  return Promise.reject(err)
})

// 响应拦截器:1、对后端返回的数据进行处理；2、处理token失效的问题
instance.interceptors.response.use((res) => {
  // 把axios包装的data属性去掉
  return res.data
}, (err) => {
  // 判断token是否失效
  if (err.response && err.response.status === 401) {
    // token失效了，清空用户信息，跳转到登录页面
    store.commit('user/updateUser', {})
    return router.push('/login')
  }
  return Promise.reject(err)
})

// 封装通用的调用后端接口的方法
export default (options) => {
  // axios返回的结果是Promise实例对象
  return instance({
    method: options.method,
    url: options.url,
    // data: options.data
    // 对象的key可以是动态变量（ES6提供的规则）
    // toUpperCase方法的作用：把小写字符串转换为大写
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}

// import request from '@/utils/request.js'
// request({
//   method: 'get',
//   url: '/login',
//   data: {}
// }).then()

// axios({
//   method: 'get',
//   url: '',
//   // 如果发送该请求，参数名称需要用params
//   params: {},
//   // 如果发送post/put/delete请求，那么请求参数采用data
//   data: {}
// })
